<template>
    <view class="container" :style="themeColor">
        <oreder-header @searchFn="searchFn" @doFilter="doFilter"></oreder-header>
        <view class="main" v-if="!isloadding">
            <mescroll-uni
                ref="mescrollRef"
                @init="mescrollInit"
                :height="listHeight"
                :down="downOption"
                @down="refresh"
                :up="upOption"
                @up="getData"
                @emptyclick="emptyClick">
                <order-item v-if="loadOk" :key="index" v-for="(item, index) in datas" :data="item"></order-item>
                <uni-load-more status="loading" v-if="isloadding"></uni-load-more>
            </mescroll-uni>
        </view>
        <view> </view>
    </view>
</template>

<script>
import orederHeader from "@/components/order/order-header.vue"
import orderItem from "@/pages_shop/components/refund/refund-order-item.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import { getUserOrderList } from "@/service/api/order.js"
export default {
    components: {
        orederHeader,
        "order-item": orderItem,
    },
    data() {
        return {
            downOption: {
                use: false,
            },
            upOption: {
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    size: 10, // 每页数据的数量
                    time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
                },
                textLoading: "加载中 ...", // 加载中的提示文本
                textNoMore: "-- 没有更多了 --", // 没有更多数据的提示文本
                empty: {
                    use: true, // 是否显示空布局
                    icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                    tip: "~ 暂无数据 ~", // 空提示
                },
                toTop: {
                    src: false,
                },
            },
            listHeight: "", //list所需高度
            loadOk: false,
            isloadding: false,
            datas: [],
            requestData: {
                endTime: "",
                PostType: "0,1,2,5",
                startTime: "",
                searchKey: "",
                state: "2",
            },
        }
    },
    mounted() {
        this.getListHeight()
        //#ifndef MP
        this.refresh(this.requestData)
        //#endif
    },
    methods: {
        getListHeight(element) {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"

                this.loadOk = true
            })
        },
        refresh(requestData) {
            this.param = requestData
            this.datas = []
            this.mescroll.resetUpScroll()
        },
        getData(page) {
            let param = this.requestData
            param.pageSize = page.size
            param.pageIndex = page.num
            param.orderState = this.requestData.state
            param.payState = this.getAppSet().canGetRefundPayState
            getUserOrderList(param).then((res) => {
                this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                this.datas = this.datas.concat(res.Data)
            })
        },
        //搜索
        searchFn(searchKey) {
            this.requestData.searchKey = searchKey
            this.refresh()
        },
        //筛选
        doFilter(data) {
            this.requestData.startTime = data.startDate ? data.startDate + "T00:00:00.000Z" : ""
            this.requestData.endTime = data.endDate ? data.endDate + "T23:59:59.000Z" : ""
            this.refresh()
        },
        changeSearchValue(value) {
            //搜索关键字回调
            this.requestData.searchKey = value
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}
</style>
